<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/static/layui-v2.3.0/css/layui.css">
</head>
<body>
    <div class="layui-row">
        <div class="layui-col-lg4">&nbsp;</div>
        <div class="layui-col-lg4">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>登录</legend>
            </fieldset>
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="username" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" lay-verify="password" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="login" type="button">登录</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="/static/js/vendor/jquery-3.3.1.min.js"></script>
    <script src="/static/layui-v2.3.0/layui.js"></script> 
    <script>
        layui.use(['layer', 'form'], function(layer, form){
            // 验证
            form.verify({
                username: function(value){
                  if(!value.trim()){
                    return '用户名没有填写~';
                  }
                },
                password: [/(.+){6,12}$/, '密码必须6到12位~']
            });
            // 登录提交
            form.on('submit(login)', function(res) {
                $.ajax({
                    type: 'post',
                    url: '/handleLogin',
                    data: res.field,
                    success: function(res) {
                        if(res.status) {
                            layer.msg(res.msg, {time: 1000, icon: 6}, function() {
                                location.href = '/';
                            });
                        } else {
                            layer.msg(res.msg, {time: 1500, icon: 5});
                        }
                    },
                    error: function() {
                        console.warn('request interface is failure.');
                    }
                });
            });
        });
    </script>
</body>
</html>